<template>
  <!-- 24等分 栅格布局 -->
  <el-row>  
    <el-col :span="5">
      <el-text>商品名称</el-text>
      <el-input v-model="search.GoodsName" style="width: 150px" placeholder="请输入商品名称" clearable/>
    </el-col>
    <el-col :span="8">
      <el-text>创建日期查询</el-text>
      <el-date-picker
        v-model="search.CreateTime"
        type="date"
        placeholder="请输入日期"
        value-format="YYYY-MM-DD"
      />
    </el-col>
    <el-col :span="3">
      <el-button type="primary" @click="SelectData">查询</el-button>
    </el-col>
  </el-row>


    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="goodsId" label="商品ID"/>
      <el-table-column prop="goodsCode" label="商品编号"/>
      <el-table-column prop="goodsName" label="商品名称" />
     
      <el-table-column prop="goodsImg" label="商品图片">
        <template #default="{row}">
          <img style="width:50px;height:50px" :src="row.goodsImg"/>
        </template>
      </el-table-column>

      <el-table-column prop="goodsPrice" label="商品价格">
        <template #default="{row}">
          ￥{{ row.goodsPrice.toFixed(2) }}
        </template>
        </el-table-column>
      <el-table-column prop="goodsInventory" label="商品库存" align="center" width="80"/>
      <el-table-column prop="goodsInfo" label="商品说明" width="80" />
      <el-table-column prop="goodsStatus" label="商品状态" >
        <template #default="{row}">
          <el-tag :type="row.goodsStatus?'success':'danger'" effect="dark" size="large">
            {{row.goodsStatus?"上架":"下架"}}
          </el-tag>
        </template>
        </el-table-column>
      <el-table-column prop="sheetUpTime" label="创建时间" >
        <template #default="{row}">
          {{ moment(row.sheetUpTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        </el-table-column>

        <el-table-column  label="操作" >
          <template #default="{row}">
            <el-button :type="row.goodsStatus?'danger':'success'" @click="upStatus(row.goodsId)">
              {{ row.goodsStatus?"下架":"上架" }}
            </el-button>
            <el-button type="warning" @click="upGoods(row.goodsId)">修改</el-button>
            <el-button type="danger" @click="delGoods(row.goodsId)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <table>
      <tr>
        <td>
          <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, sizes"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    当前共有{{ page.totalCount }}条数据，
    每页{{ page.PageSize }}条数据，
    当前{{ page.PageIndex }}/{{ page.totalPage }}页
  </el-pagination>
        </td>
        <td>
          <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    >
    <el-button class="btn-prev" @click="handleCurrentChange(1)" :disabled="page.PageIndex==1">首页</el-button>

  </el-pagination>
        </td>
        <td>
          <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button class="btn-prev" @click="handleCurrentChange(page.totalPage)" :disabled="page.PageIndex==page.totalPage">尾页</el-button>
  </el-pagination>
        </td>
      </tr>
    </table>
  </template>
 
  <script lang="ts" setup>
      import { onMounted, inject, ref,reactive } from 'vue'
  import axios from 'axios';
  import moment from 'moment';
  import { ElMessage,ElMessageBox  } from 'element-plus'
import {useRouter} from 'vue-router'
import { useGoodStore } from '@/stores/counter';
const useStore=useGoodStore();
const router=useRouter();

  const upGoods=(gid:number)=>{
    router.push('/backGoods');
    useStore.gid=gid;
  }

  const delGoods=(gid:number)=>{
    ElMessageBox.confirm(
    '确定删除?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  //确认之后触发的事件
    .then(() => {
      axios.delete('/api/Goods/GoodsDel?gid='+gid)
      .then(res=>{
        if(res.data.isSuc)
        {
          ElMessage.success(res.data.msg);
          getGoods();
        }
        else
        {
          ElMessage.error(res.data.msg);
        }
      })
    })
  
  }
  const upStatus=(gid:number)=>{
    axios.put('/api/Goods/UpdateState?gid='+gid)
    .then(res=>{
      if(res.data.isSuc)
      {
        ElMessage.success('操作成功');
        getGoods();
      }
      else
      {
        ElMessage.error('操作失败'+res.data.msg);
      }
    });
  }
  const page=reactive({
    PageIndex:1,
    PageSize:2, 
    totalCount:0,
    totalPage:0
  })
  const search=reactive({
    GoodsName:"",
    CreateTime:""
  })

  interface Goods {
    goodsId: number,
        goodsCode: string,
        goodsName: string,
        goodsImg: string,
        goodsPrice: number,
        goodsInventory: number,
        goodsInfo: string,
        goodsStatus: boolean,
        sheetUpTime: Date
  }
  const tableData = ref<Goods[]>([]);

  const getGoods=()=>{
    axios.get('/api/Goods/GetGoodsByPage',{
        params:{
          PageIndex:page.PageIndex,
          PageSize:page.PageSize, 
          GoodsName:search.GoodsName,
          SheetUpTime:search.CreateTime
        }
    })
    .then(res=>{
        console.log(res.data);
        if(res.data.isSuc)
        {
            tableData.value=res.data.data.data;
            page.totalCount=res.data.data.totalCount;
            page.totalPage=res.data.data.totalPage;
        }
    })
  }
  onMounted(()=>{
    getGoods();
  })

  const handleSizeChange = (val: number) => {
 page.PageSize=val;
 getGoods();
}
const handleCurrentChange = (val: number) => {
page.PageIndex=val;
getGoods();
}
const SelectData=()=>{
  page.PageIndex=1;
  getGoods();
}

  </script>
  